<template>
	<view class="layer">
		<view class="loadCus" v-show="IsLoading">
			<p class="tagline">正在加载...</p>
			<p class="tagline1">便捷签收<br />从【码上签】开始</p>
		</view>
		<view class="topBox">
			<image class="avatar" :src="userInfo.userAUrl"></image>
			<view class="formLable">
				<view style="display: flex">
					<view class="lableItem">
						{{ namePass(userInfo.UserName) || "" }}
					</view>
					<view class="lableItem" style="flex: 1">
						{{ phonePass(userInfo.UserPhone) || "" }}
					</view>
				</view>
				<view class="lableItem">
					{{ idCardPass(userInfo.IdCard) || "" }}
				</view>
			</view>
		</view>
		<view class="container">
			<view v-for="(item, index) in data" :key="index">
				<view class="info">
					<h3>内容信息</h3>
					<view v-for="(im, ix) in dataHeader" :key="ix">
						<view class="cell" v-if="im.dataIndex != 'nums'">
							<text>{{ im.title }}</text>
							<b>{{ resetValue(im, item) }}</b>
							<!-- <b>{{ item[im.dataIndex]==null?'':item[im.dataIndex] }}</b> -->
						</view>
					</view>
					<view class="cell" style="
              display: flex;
              justify-content: flex-end;
              text-align: right;
              border-top: 1px dashed #ccc;
            ">
						<span style="width: 100px; line-height: 2">签收量</span>
						<input :disabled="CanEdit" v-model="item.nums" class="number" type="number" @input="different"
							placeholder="请输入签收量" />
					</view>
				</view>
			</view>
			<view class="info">
				<h3>签收照片/视频</h3>
				<view class="" style="display: flex; flex-wrap: wrap">
					<view style="
              width: 25vw;
              height: 25vw;
              margin-left: 5px;
              border: 1px solid rgb(238, 238, 238);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 3px;
              position: relative;
              margin-bottom: 5px;
            " v-for="(item, index) in fileList" :key="item.Id" @click.stop="viewopen(item)">
						<image :src="item.url" mode="" style="width: 100%; height: 100%"></image>
						<view style="
                width: 20px;
                height: 20px;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
              " @click.stop="delImg(item, index)" v-if="!disabled">
							<uni-icons type="closeempty" size="20" color="#ccc"></uni-icons>
						</view>
					</view>
					<view style="
              width: 25vw;
              height: 25vw;
              margin-left: 5px;
              margin-bottom: 5px;
              border: 1px solid rgb(238, 238, 238);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 3px;
            " @click="openChange">
						<uni-icons type="plusempty" size="60" style="color: #ccc"></uni-icons>
					</view>
				</view>

				<view style="display: flex; margin-top: 10px" v-if="src">
					<view style="
              width: 25vw;
              height: 25vw;
              margin-left: 1vw;
              border: 1px solid rgb(238, 238, 238);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 3px;
              background-color: #000;
              position: relative;
            " v-if="src" @click.stop="viewopen">
						<u-icon name="play-circle" color="#fff" size="28" style="
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              "></u-icon>
						<view style="
                width: 20px;
                height: 20px;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
              " @click.stop="videoDel" v-if="!disabled">
							<uni-icons type="closeempty" size="20" color="#ccc"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 	<uni-file-picker file-mediatype="image" :del-icon="!disabled" v-model="fileList" :auto-upload="false"
					mode="grid" :sourceType="['camera']" :disabled="disabled" limit="5" @select="afterRead"
					@delete="handleDelete" /> -->
			</view>
			<!-- <view class="info">
				<h3>签收视频</h3>

				<button size="mini" type="warn" @click="videoDel" style="margin-top: 10px;" v-if="src">删除视频</button>
				<button size="mini" type="primary" @click="addVideo" style="margin-top: 10px;" v-else>添加视频</button>
			</view> -->
			<view class="info" style="border: none">
				<h3>签收人</h3>
				<!-- <view v-if="disabled" class="info"> -->

				<!-- <view v-if="!newSign && SignList.length < SignNum" style="
										  height: 200px;
										  border: 1px solid #ccc;
										  line-height: 200px;
										  text-align: center;
										  width: 100%;
										" @click="handleSignature">
					请签名
				</view> -->
				<!-- </view> -->
				<view>
					<view style="width: 100%">
						<view v-if="!Sign && !disabled" @click="handleSignature" style="
                height: 200px;
                border: 1px solid #ccc;
                line-height: 200px;
                text-align: center;
                width: 100%;
              ">
							请签名
						</view>
						<view style="width: 100%" v-if="Sign && !disabled" class="flexCell">
							<img :src="Sign" alt="" class="imgSignature" @click="handleSignature" />
						</view>
						<!-- <view :key="i" v-for="i in SignList" class="flexCell" style="width: 100%;">
						
							<img :src="i" alt="" class="imgSignature" />
						</view> -->
					</view>
				</view>
				<view class="positionBox">
					<view class="positionLine">
						{{ pObj.SignInAddress || "请获取位置信息" }}
					</view>
					<button class="positionBtn" size="mini" type="primary" @click="getPosition" :disabled="disabled">
						<uni-icons color="#fff" type="location" size="30" class="positionIcon"></uni-icons>
					</button>
				</view>
			</view>
		</view>
		<view class="fixedBox">
			<!-- 已签收或拒收 -->
			<view v-if="disabled">
				<view style="display: flex; justify-content: space-between">
					<button class="submitButton" disabled style="width: 270rpx">
						{{
              Status == 1
                ? "已签收"
                : Status == 2
                ? "已拒收"
                : Status == 3
                ? "部分签收"
                : ""
            }}
					</button>
					<button class="submitButton" @click="toDownload" round type="primary">
						完成
					</button>
				</view>
			</view>
			<!-- 签收或拒收 -->
			<view v-else style="
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          box-sizing: border-box;
          padding: 0 10px;
        ">
				<!-- <button v-if="flag==false" style="opacity: 0.6;width: 100%;" @click="goRealName">请先实名认证</button> -->
				<button v-if="flag == true" :style="{
            width: '48%',
            color: '#fff',
            'background-color': difference != -1 ? '#e6a23c' : '#1aad19',
          }" class="submitButton" @click="handleGenerate(true)">
					{{ difference != -1 ? "提交差异" : "确认" }}
				</button>
				<button v-if="flag == true" style="width: 48%" class="submitButton" type="warn"
					@click="handleGenerate(false)">
					拒收
				</button>
			</view>
		</view>

		<uni-popup ref="viewShow" type="center" :is-mask-click="true">
			<video :src="src"></video>
		</uni-popup>
		<!-- 确认说明 -->
		<uni-popup ref="remark" type="center" :is-mask-click="false">
			<view class="remarkBox">
				<view class="title"> 请输入{{ title }} </view>
				<view class="content">
					<textarea class="textarea" :show-confirm-bar="false" :maxlength="1000" v-model="pObj.Memo"
						:placeholder="'请输入' + title">
          </textarea>
					<view class="memoLength"> {{ memoLength }}/1000 </view>
				</view>
				<view v-if="title != '拒收说明'">
					<view v-for="item in entity.evaluation" :key="item" class="content" style="display: flex">
						<text style="margin-right: 30rpx">{{ item }}</text>
						<uni-rate v-if="item == '服务'" v-model="entity['service']" />
						<uni-rate v-if="item == '物流'" v-model="entity['logistics']" />
						<uni-rate v-if="item == '产品'" v-model="entity['product']" />
					</view>
				</view>
				<view class="footer">
					<text @click="beforeClose">取消</text>
					<text class="confirmBtn" @click="dialogConfirm">确认</text>
				</view>
			</view>
		</uni-popup>
		<!-- 弹出签字 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" :is-mask-click="false">
			<Sign ref="sign" :showSign="true" @finish="signFinish" @close="signClose" />
		</uni-popup>
		<!-- 确认说明 -->
		<uni-popup ref="codeBox" type="center" :is-mask-click="false">
			<view class="remarkBox">
				<view class="title"> 请输入验证码 </view>
				<view class="content">
					<view style="display: flex">
						<input v-model="code" style="
                border-bottom: 1px solid #ccc;
                font-size: 20px;
                height: 28px;
                flex: 1;
              " type="number" />
						<button size="mini" style="width: 70px" :disabled="oneMinute < 60" @click="sendCodeSubmit">
							{{ oneMinute < 60 ? oneMinute + "S" : "获取" }}
						</button>
					</view>
				</view>

				<view class="footer">
					<text @click="codeClose">取消</text>
					<text class="confirmBtn" @click="codeConfirm">确认</text>
				</view>
			</view>
		</uni-popup>
		<u-popup :show="imgofVideo" @close="imgofVideo = false" mode="bottom">
			<view style="padding: 10px">
				<button style="margin-bottom: 10px" type="primary" @click="upImg">
					照片
				</button>
				<button style="margin-bottom: 10px" type="primary" @click="upVideo" :disabled="src ? true : false">
					视频
				</button>
				<button style="margin-bottom: 10px">取消</button>
			</view>
		</u-popup>
		<!-- 是否已经认证 -->
		<uni-popup ref="mask" type="top" backgroundColor="rgba(0,0,0,0.2)" height="100vh"></uni-popup>
	</view>
</template>

<script>
	import {
		log
	} from "util";
	import Sign from "@/components/sign.vue";
	import {
		idCardPass,
		namePass,
		phonePass
	} from "@/utils/PrivacyPass.js";

	export default {
		components: {
			Sign,
		},
		computed: {
			memoLength() {
				return this.pObj.Memo ? this.pObj.Memo.length : 0;
			},
			SignList() {
				let arr = [];
				for (let i = 0; i < this.SignNum; i++) {
					if (this.pObj["Sign" + (i + 1)]) {
						arr.push(this.pObj["Sign" + (i + 1)]);
					}
				}
				if (this.pObj.Sign) {
					arr = [this.pObj.Sign, ...arr];
				}
				return arr;
				// forin
				// console.log(this.Sign.split('%{}').filter(item => item != '' && item != 'null'), 'signlist')
				// return this.Sign.split('%{}').filter(item => item != '' && item != 'null')
			},
		},
		data() {
			return {
				imgofVideo: false, //视频或图片
				newSign: false,
				Sign1: "",
				Sign2: "",
				Sign3: "",
				Sign4: "",
				viewShow: false,
				VideoArr: [],
				src: "",
				pObj: {
					SignInAddress: "",
				},
				entity: {},
				data: [],
				digit: "",
				lineWidth: 6,
				lineColor: "#000000",
				bgColor: "#fff",
				resultImg: "",
				isCrop: false,
				time: 10,
				timeShow: false,
				Interval: null,
				fileList: [],
				showPopup: false,
				Sign: "",
				disabled: false, // 控制页面所有操作功能
				title: "",
				Status: "3",
				userAUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
				userInfo: {},
				userList: [], // 签收人
				timer: null, // 签收码定时器
				oneMinute: 60, // 签收倒计时
				code: "", // 签收码
				dataHeader: [], // 表格头
				difference: -1,
				address: "",
				checkPhone: false,
				location: {}, // 收货坐标
				nowLocation: {}, // 当前坐标
				CustomerName: "",
				Company: "",
				showCodeBox: true,
				// 上个页面传递过来的当前行数据
				rowData: {},
				// 判断是否实名认证
				flag: true,
				token: "",
				remark: {},
				type: 0,
				realPass: false,
				showPrivacy: true, // 隐私展示
				// 是否认证
				isFlag: false,
				SignNum: 3,
				cCus: {
					//收货坐标
					lat: "",
					lng: "",
				},
				DistanceNum: 0, //距离
				Phone: "", //传递过来的签收人手机号  用于和userInfo里的手机号做判断
				CanEdit: false, //是否可以编辑
				IsLoading: true, //是否展示loading
			};
		},
		onShow() {},
		async onLoad(options) {
			setTimeout(() => {
				this.IsLoading = false;
			}, 3000);
			// 判断是否勾选了签收时可修改数量条件  没有禁用修改功能
			let IsEditNum = uni.getStorageSync("IsEditNum");

			if (!IsEditNum) {
				this.CanEdit = true;
			}

			if (options.phone) {
				this.Phone = options.phone;
			}

			this.userInfo = uni.getStorageSync("userInfo") || {};

			this.$set(this.rowData, "Id", options.Id || uni.getStorageSync("Id"));
			// this.$set(this.rowData, 'Company', options.Company)
			// // 认证方式签收类别(0二素 1人脸识别签收 2 三要素  3微信签收)

			if (options.isType) {
				await this.getInfo();
				await this.getPosition();
				await this.getdistance();

				return;
			}
			let type = uni.getStorageSync("type");
			this.$set(this.rowData, "SignType", type);

			await this.getInfo();

			await this.getPosition();
			await this.getdistance();
			// // 缓存认证类型

			// console.log('获取赋值后的rowData', this.rowData)
			// uni.showLoading()
			// qqmapsdk = new QQMapWX({
			// 	key: '4IIBZ-UJ2CA-C4FKX-C7JLR-WLJY2-WRBPC'
			// })
			// // // 获取位置信息

			// let id = uni.getStorageSync('Id')

			// // // 获取toekn
			// this.getToken()
			// // // 判断是否实名认证
			// this.AuthRealName()
		},
		onBackPress(options) {
			uni.reLaunch({
				url: "/pages/index/index?Id=" + uni.getStorageSync("Id"),
			});
			return true;
		},

		onUnload() {
			uni.reLaunch({
				url: "/pages/index/index?Id=" + uni.getStorageSync("Id"),
			});
		},
		methods: {
			upImg() {
				this.imgofVideo = false;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera"], //从相册选择
					success: (file) => {
						this.uploadFile(file)
						// return
						// this.compressImg(file).then(files=>{
						// 	this.uploadFile(files)
						// })
						// console.log(file);
						// console.log(JSON.stringify(file.tempFilePaths));
					},
				})
			},
			compressImg(file) {
				console.log(file, file.tempFiles[0])
				console.log(file, 'test')
				return new Promise((resolve, reject) => {
					// const reader = new FileReader();
					// reader.readAsDataURL(file.tempFilePaths[0]);
					// reader.onload = (e) => {
					const img = new Image();

					// img.src = e.target.result;
					img.onload = () => {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');
						console.log(img.width, img.height);
						const ratio = img.width / img.height
						const baseSize = 500 //原始宽度值
						canvas.width = baseSize; // 设置压缩后图片的宽度
						// canvas.height = 300; // 根据原始图片比例计算压缩后图片的高度
						canvas.height = baseSize / ratio; // 根据原始图片比例计算压缩后图片的高度
						ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
						let baseFile = file.tempFiles[0]
						canvas.toBlob((blob) => {
							const compressedFile = new File([blob], baseFile.name, {
								type: baseFile.type,
								lastModified: Date.now()
							});
							resolve(compressedFile);
						}, baseFile.type);
					};
					img.src = file.tempFilePaths[0];
					// }
				})
			},
			uploadFile(file) {
				uni.showLoading({
					title: "上传中",
					mask: true,
				});
				uni.uploadFile({
					url: this.$baseUrl + "/Base_Manage/Upload/UploadFileProductByZip",
					filePath: file.tempFilePaths[0],
					name: "file",
					success: (val) => {
						uni.hideLoading();
						let data = JSON.parse(val.data);
						console.log(data, 'successdata');
						if (data.code === '200') {
							uni.showToast({
								title: "上传成功",
								duration: 2000,
							});
							this.fileList.push({
								url: data.thumbUrl,
							});
						} else {
							uni.showToast({
								title: "上传失败",
								duration: 2000,
							});
							console.log(data)
						}
					},
					fail: () => {
						uni.hideLoading();
					},
				});
			},
			upVideo() {
				this.imgofVideo = false;
				this.addVideo();
			},
			openChange() {
				this.imgofVideo = true;
			},
			async submitSign() {
				this.pObj.Sign = this.SignList[0]; // 签名
				this.pObj.Sign1 = this.SignList[1]; // 签名
				this.pObj.Sign2 = this.SignList[2]; // 签名
				this.pObj.Sign3 = this.SignList[3]; // 签名
				this.pObj.Sign4 = this.SignList[4]; // 签名
				// this.submitKeys(this.pObj, 'FullName', this.userInfo.name)
				// this.submitKeys(this.pObj, 'ReceiptPhone', this.userInfo.phone)
				// this.submitKeys(this.pObj, 'IdCard', this.userInfo.idCard)
				// this.submitKeys(this.pObj, 'IP', uni.getStorageSync('DeviceId'))
				// this.submitKeys(this.pObj, 'DeviceName', uni.getStorageSync('DeviceName'))
				// console.log(this.pObj)
				await this.$http("post", "/BO/BillList/SaveSignData", this.pObj).then(
					async (res) => {
						if (res.Success) {
							uni.showToast({
								icon: "none",
								title: "操作成功!",
							});
							// if (this.title == '确认说明' && this.pObj.IsEvidence) await this.toChain()
							uni.navigateTo({
								url: "/pages/Complete/Complete?Status=" + this.pObj.Status,
							});
						} else {
							uni.showToast({
								icon: "none",
								duration: 2000,
								title: res.Msg,
							});
						}
						uni.hideLoading();
					}
				);
				await this.$http(
					"post",
					"/BO/BillList/GetOpenIdList?Id=" + this.pObj.Id
				).then(async (res) => {
					if (res.Success) {
						// token获取
						let result = await this.$http(
							"GET",
							"/Base_Manage/Home/GetWxAccessTokenNoCode"
						);
						let access_token = JSON.parse(result.Data).access_token;
						res.Data.forEach((item) => {
							this.publicPush(access_token, item);
						});
					}
				});
			},
			facePass() {
				uni.redirectTo({
					url: "/pages/FaceIdentify/index",
				});
				return;
			},
			viewclose() {
				this.show = false;
				// console.log('close');
			},
			viewopen(item) {
				console.log(item);
				let IsEditNum = uni.getStorageSync("IsEditNum");
				if (item) {
					uni.previewImage({
						urls: [item.url],
					});
					return;
				}
				this.$refs.viewShow.open();
			},
			videoDel() {
				console.log("2");
				this.src = "";
			},
			delImg(item, index) {
				this.fileList.splice(index, 1);
			},
			addVideo() {
				console.log("1");
				uni.chooseVideo({
					sourceType: ["camera"],
					success: (res) => {
						console.log(res);
						this.src = res.tempFilePath;
						uni.showLoading({
							title: "上传中",
							mask: true,
						});
						uni.uploadFile({
							url: this.$baseUrl + "/Base_Manage/Upload/UploadFileProductByForm",
							filePath: res.tempFilePath,
							name: "file",
							success: (val) => {
								let data = JSON.parse(val.data);
								uni.hideLoading();
								uni.showToast({
									title: "上传成功",
									duration: 2000,
								});
								if (data.code == "200") {
									this.src = data.url;
								}
							},
							fail: () => {
								uni.hideLoading();
							},
						});
					},
					complete: (err) => {},
				});
			},
			goRealName() {
				uni.redirectTo({
					url: "/pages/User/RealName?flag=" + this.flag + "&token=" + this.token,
				});
			},
			resetValue(val, itemdata) {
				if (itemdata[val.dataIndex]) {
					if (val.type === "text") {
						return itemdata[val.dataIndex];
					} else if (val.type === "number") {
						return this.NumFormatting(
							itemdata[val.dataIndex],
							Number(val.decimals ? val.decimals : 2)
						);
					} else {
						console.log(val);
						console.log(this.NumFormatting(itemdata[val.dataIndex], 2));
						return this.NumFormatting(itemdata[val.dataIndex], 2);
					}
				} else {
					return "";
				}
			},
			NumFormatting(data, num = 2) {
				if (isNaN(Number(data))) {
					return data;
				} else {
					return Number(data).toFixed(num);
				}
			},
			// 获取TOKEN
			async getToken() {
				console.log("获取token", this.userInfo);
				await uni
					.request({
						url: this.$veriUrl +
							"/auth/VeriRecord/token?phone=" +
							this.userInfo.UserPhone,
						method: "GET",
					})
					.then((result) => {
						let [err, res] = result;
						if (res.data.code == 200) {
							this.token = JSON.parse(res.data.data).access_token;
							console.log("获取的token", this.token, this.flag);
						}
					});
			},
			// 验证是否实名认证
			async AuthRealName() {
				console.log("获取实名认证", this.userInfo);
				this.flag = false;
				await uni
					.request({
						url: this.$veriUrl +
							"/auth/VeriRecord/state?Value=" +
							this.userInfo.UserPhone,
						method: "GET",
					})
					.then((result) => {
						let [err, res] = result;
						if (res.data.code == 200) {
							// 说明已认证
							console.log(
								"获取的实名信息=========================",
								res.data.data,
								this.token,
								this.flag,
								this.userInfo
							);
							this.flag = true;
							this.img = res.data.data.veriType;
							// 相关字段插入用户信息  从新缓存
							this.$set(this.userInfo, "fromDevice", res.data.data.fromDevice);
							this.$set(this.userInfo, "id", res.data.data.id);
							this.$set(this.userInfo, "createTime", res.data.data.createTime);
							this.$set(this.userInfo, "IdCard", res.data.data.idNumber);
							this.$set(this.userInfo, "RealName", res.data.data.name);
							this.$set(this.userInfo, "UserName", res.data.data.name);
							this.$set(this.userInfo, "OpenId", res.data.data.openId);
							this.$set(this.userInfo, "UserPhone", res.data.data.phone);
							this.$set(this.userInfo, "remark", res.data.data.remark);
							this.$set(this.userInfo, "Sign", res.data.data.sign);
							this.$set(this.userInfo, "state", res.data.data.state);
							this.$set(this.userInfo, "veriType", res.data.data.veriType);
							// 暂时不删除
							// this.userInfo = {
							// 	...res.data.data,
							// 	name: res.data.data.name || this.userInfo.UserName,
							// 	phone: res.data.data.phone || this.userInfo.UserPhone,
							// 	idCard: res.data.data.idNumber || this.userInfo.IdCard,
							// 	avatarUrl: res.data.data.avatarUrl || this.userInfo.avatarUrl,
							// 	smscode: res.data.data.smscode || this.userInfo.smscode,
							// }
							if (this.userInfo.RealName) this.getBG(this.userInfo.RealName);
							else uni.removeStorageSync("nameBG");
						} else {
							// 说明未认证
							this.flag = false;
							this.isAuthentiction();
						}
						console.log("获取鑫缓存suerinfo", this.userInfo);
						uni.removeStorageSync("userInfo");
						// 重新缓存用户信息
						uni.setStorageSync("userInfo", this.userInfo);
						// 存储缓存是否认证
						uni.removeStorageSync("flag", this.flag);
						uni.setStorageSync("flag", this.flag);
					});
				return this.flag;
			},
			getBG(name) {
				this.$http(
					"post",
					"/Base_Manage/Upload/GetNameSign?Name=" + name || "签字"
				).then((res) => {
					if (res.Success) uni.setStorageSync("nameBG", res.Data);
				});
			},
			// 是否已认证
			isAuthentiction() {
				// this.$refs.mask.open()
				this.showModel("签收对账单需进行实名认证,请前往认证信息进行认证");
			},
			// 提示弹窗
			showModel(title) {
				this.$refs.mask.close();
				uni.hideLoading();
				uni.showModal({
					title: "提示",
					content: title,
					showCancel: false,
					success: (val) => {
						if (val.confirm) {
							uni.redirectTo({
								url: "/pagesA/User/RealName?flag=" +
									this.flag +
									"&token=" +
									this.token,
							});
						}
					},
				});
			},

			async getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let id = this.rowData.Id;
				await this.$http("post", "/BO/BillList/GetBillData", {
					id,
				}).then(async (res) => {
					if (res.Success) {
						console.log(res);

						this.pObj = res.Data;
						// // 名字
						this.pObj.FullName = this.userInfo.UserName;
						// 电话
						this.pObj.ReceiptPhone = this.userInfo.UserPhone;
						// 身份证
						this.pObj.IdCard = this.userInfo.IdCard;
						// // 缓存头像
						this.userAUrl = this.userInfo.UserAvatarURL;
						this.src = res.Data.Video;
						if (!this.pObj.SignInAddress) this.pObj.SignInAddress = this.address;
						await this.$http(
							"post",
							"/Base/Base_Template/GetCompanyTemp?CompayId=" + res.Data.Company, {}
						).then((resjson) => {
							this.SignNum = resjson.Data.SignNum;

							console.log(this.SignNum);
						});
						this.getBG(this.userInfo.UserName);
						this.showCodeBox = uni.getStorageSync("showCodeBox") || false;
						// if (res.Data.Sign) {
						// this.Sign = res.Data.Sign;
						// for (let i = 4; i > 0; i--) {
						// 	this.Sign = res.Data["Sign" + i] + '%{}' + this.Sign;
						// }
						// console.log(this.Sign, '-----------------');
						// }
						if (res.Data.Status != 0) {
							this.Status = res.Data.Status;
							this.disabled = true;
							uni.showToast({
								icon: "none",
								title: "此货单已完成",
							});
						}
						// 是否需要从本地返填手机号
						if (!this.pObj.ReceiptPhone)
							this.pObj.ReceiptPhone = this.userInfo.UserPhone;
						// 货品图片
						if (res.Data.Imgs) {
							this.fileList = res.Data.Imgs.split(",").map((item) => ({
								url: item,
							}));
						}
						// 签收人图片
						if (res.Data.UserImage) {
							this.userList = [{
								url: res.Data.UserImage,
							}, ];
						} else if (this.userInfo.avatarUrl) {
							this.userList = [{
								url: this.userInfo.avatarUrl,
							}, ];
						}
						// 是否验证签收人手机号
						if (res.Data.IscheckPhone) this.checkPhone = res.Data.IscheckPhone;
						if (res.Data.ContactPersonName)
							this.pObj.FullName = res.Data.ContactPersonName;
						uni.setStorageSync("billId", res.Data.BillId);
						if (res.Data.Content) {
							this.entity = JSON.parse(res.Data.Content);
							console.log(this.entity);
							if (this.entity.printlist.length > 0) {
								let arr = [];
								this.entity.printlist.filter((item) => {
									if (item.Keys == "table") {
										arr = [item];
									} else if (item.Keys == "CustomerName") {
										this.CustomerName = item.value;
									} else if (item.Keys == "Company") {
										this.Company = item.value;
									}
								});
								if (arr.length > 0) {
									if (this.data.length > 0) return;
									this.dataHeader = arr[0].columns;
									this.data = arr[0].datalist;
									this.data.forEach((im) => (im.nums = Number(im.Quantity)));
								}
							} else {
								this.data = [];
							}
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无信息",
							});
						}
					} else {
						uni.showToast({
							icon: "none",
							title: "数据获取失败!请刷新页面重试",
						});
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 1);
				});
			},
			async checkCustomerPhone(e) {
				await this.$http("post", "/BO/CustomerInfo/CustomerIsValid", {
					id: e.CustomerId,
				}).then((result) => {
					console.log(result, "222");
					if (
						result.Data &&
						e.CustomerPhone &&
						e.CustomerPhone != this.userInfo.UserPhone
					) {
						uni.showModal({
							title: "提示",
							content: "当前手机号与签收人不符,请联系发货方",
							showCancel: false,
							success: (val) => {
								if (val.confirm) {
									uni.reLaunch({
										url: "/pagesA/index/index",
									});
								}
							},
						});
						return;
					}
				});
			},
			// 获取收货地址坐标
			getCoordinate(address) {
				this.$http("post", "/BO/BillList/Getaddress?address=" + address).then(
					(res) => {
						if (JSON.parse(res.Data).Success) {
							let obj = JSON.parse(JSON.parse(res.Data).data);
							if (obj.status == 0) {
								this.location = obj.result.location;
								console.log(this.location);
							}
						}
					}
				);
			},
			// 隐私加密
			idCardPass(text) {
				return idCardPass(text);
			},
			namePass(text) {
				return namePass(text);
			},
			phonePass(text) {
				return phonePass(text);
			},
			// 差异计算
			different(e) {
				let num = 0;
				let allNum = 0;
				let idx = this.data.findIndex((item) => item.nums != item.Quantity);
				this.difference = idx;
			},

			// 获取签收码
			async sendCodeSubmit() {
				let flag = null;
				let BillId = uni.getStorageSync("Id");
				let url = "";
				if (this.checkPhone) url = "/BO/CustomerLinkman/CSSWeChatShort";
				else url = "/BO/CustomerLinkman/CSSendSMS";
				let phone = this.userInfo.UserPhone ?
					this.userInfo.UserPhone :
					this.Phone;
				await this.$http("post", url + "?Phone=" + phone + "&Id=" + BillId).then(
					(res) => {
						if (res.Success) {
							clearInterval(this.timer);
							this.timerDisabled = true;
							this.timer = setInterval(() => {
								this.oneMinute--;
								if (this.oneMinute <= 0) {
									clearInterval(this.timer);
									this.oneMinute = 60;
									this.timerDisabled = false;
								}
							}, 1000);
							uni.showToast({
								icon: "none",
								title: "签收码发送成功",
							});
							flag = true;
						} else {
							uni.showModal({
								title: "签收家",
								content: res.Msg,
								showCancel: false,
							});
							flag = false;
						}
					}
				);
				return flag;
			},
			// 位置信息
			async getPosition() {
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						this.$http(
							"post",
							`/BO/BillList/ConvertAddress?coords=${
              res.longitude + "," + res.latitude
            }`
						).then((val) => {
							if (val.Success) {
								this.nowLocation = val.Data.result.location;
								this.address = val.Data.result.formatted_address;
								this.$set(this.pObj, "SignInAddress", this.address);
								console.log(this.pObj);
								console.log(this.address);
							}
							console.log(val);
						});
						// alert(res.longitude)
						// alert(res.latitude)

						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					},
				});
				return;
			},
			// 图片上传
			async afterRead(file) {
				if (!file) return;
				console.log(file);

				// const fileArr = file.tempFiles.map(item => item.file.path)
				let res = await uni.uploadFile({
					url: this.$baseUrl + "/Base_Manage/Upload/UploadFileProductByForm",
					filePath: file.tempFiles[0].file.path,
					name: "file",
				});
				if (res.length > 1) {
					let data = JSON.parse(res[1].data);
					this.fileList.push({
						url: data.thumbUrl,
					});
					console.log("上传成功后的图片信息", res, this.fileList);
				} else {
					uni.showToast({
						icon: "none",
						title: "图片上传失败,请重试",
					});
					return false;
				}
				// fileArr.forEach(item => {
				// 	uni.compressImage({
				// 		src: item,
				// 		quality: 30,
				// 		success: async result => {

				// 		}
				// 	})
				// })
			},
			handleDelete(e) {
				let index = this.fileList.findIndex((item) => item.url == e.tempFilePath);
				this.fileList.splice(index, 1);
			},
			upload() {
				uni.chooseMedia({
					count: 9,
					mediaType: ["image", "video"],
					sourceType: ["camera"],
					maxDuration: 10,
					camera: "back",
					success: async (result) => {
						let res = await uni.uploadFile({
							url: this.$baseUrl + "/Base_Manage/Upload/Filleimag",
							filePath: result.tempFiles,
							name: "file",
						});
						console.log(res);
						if (res.length > 1) {
							let data = JSON.parse(res[1].data);
							this.fileList.push({
								url: data.Data,
							});
						} else {
							uni.showToast({
								icon: "none",
								title: "上传失败,请重试",
							});
							return false;
						}
					},
				});
			},
			toDownload() {
				uni.navigateTo({
					url: "/pages/Complete/Complete?Status=" + this.pObj.Status,
				});
			},
			// 签字板
			handleSignature() {
				// if (this.disabled) return
				this.$refs.popup.open();
			},
			// 预制签名
			signFinish(src) {
				console.log(src);
				if (src == "1") {
					this.Sign = this.userInfo.sign;
					// this.pObj.Sign = this.userInfo.sign
				} else {
					this.Sign = src;
				}

				// else if (this.newSign) {
				// 	let arr = this.Sign.split('%{}').filter(item => item != '')
				// 	arr[0] = src;
				// 	this.Sign = arr.join('%{}');
				// } else this.Sign = src + '%{}' + this.Sign;
				// this.newSign = true;
				this.$refs.popup.close();
			},
			signClose() {
				this.$refs.popup.close();
			},
			async getCalculateDistance() {
				let startLoc = this.nowLocation.lat + "," + this.nowLocation.lng;
				let EndLoc = this.cCus.lat + "," + this.cCus.lng;
				await this.$http("post", `/BO/BillList/CalculateDistance`, {
					startLoc: startLoc,
					EndLoc: EndLoc,
				}).then((res) => {
					if (res.Success) {
						let Data = JSON.parse(res.Data);
						// 判断Data里是否存在result  防止报错点击确定过不去的情况
						if (Data.result) {
							this.DistanceNum = Data.result.routes[0].distance;
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.Msg,
						});
					}
				});
			},
			async getdistance() {
				await this.$http(
					"post",
					`/BO/BillList/GetGeocoding?address=${this.pObj.cCusOAddress}`
				).then((res) => {
					if (res.Success) {
						this.cCus = res.Data.result.location;
					}
				});
			},
			// 签收或拒收
			async handleGenerate(bl) {
				this.pObj.Memo = "";

				let IsPosition = uni.getStorageSync("IsPosition");
				let distance = 0;
				if (IsPosition) {
					// 根据IsPosition字段判断是否开启位置验证  没有开启往下走
					if (!this.pObj.SignInAddress)
						return uni.showToast({
							title: "请获取位置信息",
							icon: "none",
						});
					distance = uni.getStorageSync("Distance") || 0;
					console.log(this.cCus);
					console.log(this.nowLocation);
					await this.getCalculateDistance();
					if (this.DistanceNum > distance) {
						return uni.showToast({
							icon: "none",
							title: "当前位置距离指定签收位置过远,请到达指定位置进行签收",
						});
					}
				}
				let idx = this.data.findIndex((item) => item.nums < 0);
				if (idx != -1)
					return uni.showToast({
						icon: "none",
						title: "请检查签收数量",
					});
				// if (this.fileList.length <= 0) return uni.showToast({
				// 	icon: 'none',
				// 	title: '请拍摄签收照片'
				// })
				if (!this.Sign)
					return uni.showToast({
						icon: "none",
						title: "请进行签字确认",
					});

				this.bl = bl;
				// this.showSubmit()
				// 未输入验证码发送
				if (this.showCodeBox && !this.code) {
					this.$refs.codeBox.open();
				} else {
					this.showSubmit();
				}
			},
			// 验证码取消
			codeClose() {
				this.code = "";
				this.$refs.codeBox.close();
			},
			// 验证码确认
			async codeConfirm() {
				let resutl = await this.$http(
					"post",
					"/BO/BillList/ValidateCode?Id=" +
					this.pObj.Id +
					"&SignCode=" +
					this.code
				);
				if (resutl.Success && resutl.Data) this.showSubmit();
				else
					uni.showToast({
						icon: "none",
						title: "验证码错误",
					});
			},
			// 提交
			showSubmit() {
				this.$refs.codeBox.close();
				// 判断是否为点击拒收
				if (!this.bl) {
					this.title = "拒收说明";
					this.$refs.remark.open();
					this.pObj.Status = 2;
					return;
				}
				// 差值
				if (this.difference != -1) {
					this.title = "差异说明";
					this.$refs.remark.open();
					this.pObj.Status = 3;
					let arr = this.data.filter(
						(item) => (item.Quantity || 0) - (item.nums || 0) != 0
					);
					let str = arr
						.map((item) => {
							console.log();
							return (
								item.cInvName +
								" 差异: " +
								((item.nums || 0) - (item.Quantity || 0))
							);
						})
						.join("；\r\n");
					this.pObj.Memo = str;
					return;
				}
				this.title = "确认说明";
				this.$refs.remark.open();
				this.pObj.Status = 1;
				this.pObj.UserImage =
					this.userList.length > 0 ? this.userList[0].url : "";
			},
			// 收货说明弹窗
			beforeClose() {
				this.$refs.remark.close();
			},
			dialogConfirm() {
				if (this.title != "确认说明" && this.pObj.Memo == "") {
					uni.showToast({
						icon: "none",
						title: "请填写" + this.title,
					});
					return false;
				}
				if (
					this.entity.evaluation &&
					this.entity.evaluation.length > 0 &&
					this.title != "拒收说明"
				) {
					let flag = false;
					this.entity.evaluation.forEach((item) => {
						if (item == "服务" && !this.entity["service"]) flag = true;
						else if (item == "物流" && !this.entity["logistics"]) flag = true;
						else if (item == "产品" && !this.entity["product"]) flag = true;
					});
					if (flag)
						return uni.showToast({
							icon: "none",
							title: "请进行星级评分",
						});
				}
				this.$refs.remark.close();
				this.submit();
			},
			// 保存
			async submit() {
				uni.showLoading();

				if (this.title == "拒收说明")
					this.data.forEach((item) => (item.nums = 0));
				this.pObj.Imgs = this.fileList.map((item) => item.url).join(",");
				this.pObj.Video = this.src;
				// 表格
				let idx = this.entity.printlist.findIndex((item) => item.Keys == "table");
				this.entity.printlist[idx].datalist = this.data;
				// 备注
				let idx2 = this.entity.printlist.findIndex((item) => item.Keys == "Memo");
				if (idx2 !== -1) this.entity.printlist[idx2].value = this.pObj.Memo;
				// 签收地址
				let idx3 = this.entity.printlist.findIndex(
					(item) => item.Keys == "SignInAddress"
				);
				if (idx3 !== -1)
					this.entity.printlist[idx3].value = this.pObj.SignInAddress;
				// 签名
				if (this.SignList.length > 0) {
					this.pObj["Sign" + this.SignList.length] = this.Sign;
				} else {
					this.pObj.Sign = this.Sign;
				}
				// this.pObj.Sign1 = this.SignList[1]; // 签名
				// this.pObj.Sign2 = this.SignList[2]; // 签名
				// this.pObj.Sign3 = this.SignList[3]; // 签名
				// this.pObj.Sign4 = this.SignList[4]; // 签名
				// this.pObj.Sign5 = this.SignList[5]; // 签名
				// this.pObj.Sign6 = this.SignList[6]; // 签名
				// this.pObj.Sign7 = this.SignList[7]; // 签名
				// this.pObj.Sign8 = this.SignList[8]; // 签名
				// this.pObj.Sign9 = this.SignList[9]; // 签名
				this.pObj.FullName = this.userInfo.UserName; // 签收人名称
				this.pObj.ReceiptPhone = this.userInfo.UserPhone; // 签收人手机号
				this.pObj.IdCard = this.userInfo.IdCard; // 签收人身份证号
				this.pObj.Content = JSON.stringify(this.entity); // JSON
				// this.pObj.IP = uni.getStorageSync('DeviceId') // 设备id
				// this.pObj.DeviceName = uni.getStorageSync('DeviceName') // 手机型号
				// uni.setStorageSync('Sign', this.Sign) // 签字 本地缓存
				await this.$http("post", "/BO/BillList/SaveSignData", this.pObj).then(
					async (res) => {
						if (res.Success) {
							uni.showToast({
								icon: "none",
								title: "操作成功!",
							});
							// if (this.title == '确认说明' && this.pObj.IsEvidence) await this.toChain()
							uni.navigateTo({
								url: "/pages/Complete/Complete?Status=" + this.pObj.Status,
							});
						} else {
							uni.showToast({
								icon: "none",
								duration: 2000,
								title: res.Msg,
							});
						}
						this.disabled = false;
						uni.hideLoading();
					}
				);
				await this.$http(
					"post",
					"/BO/BillList/GetOpenIdList?Id=" + this.pObj.Id
				).then(async (res) => {
					if (res.Success) {
						// token获取
						let result = await this.$http(
							"GET",
							"/Base_Manage/Home/GetWxAccessTokenNoCode"
						);
						let access_token = JSON.parse(result.Data).access_token;
						res.Data.forEach((item) => {
							this.publicPush(access_token, item);
						});
					}
				});
			},
			// 上链
			async toChain() {
				let result = await this.$chttp(
					"GET",
					"/Chain/auth?id=" + this.userInfo.UserPhone
				);
				console.log(result);
				if (result.Success) uni.setStorageSync("token", "Bearer " + result.Data);
				else return;
				this.$chttp("POST", "/Chain", {
					shipperId: this.pObj.Company,
					billId: this.pObj.Id,
					body: JSON.stringify(this.pObj),
					name: "回执单号:" + this.pObj.BillId,
					description: `${this.userInfo.UserName} ${this.userInfo.UserPhone}对回执单${this.pObj.BillId}签收了`,
					cCusName: this.pObj.Customer || "",
				}).then((res) => {
					console.log(res);
				});
			},
			// 公众号推送
			async publicPush(access_token, id) {
				this.$http("POST", "/Base_Manage/Home/PutWxMessage", {
					AccessToken: access_token,
					JsonStr: JSON.stringify({
						touser: id,
						template_id: "N83E6yjj2O2PavcmDgR3POlCLZfo3jDd8CAWBzZyx1s",
						url: "https://hzq.yoojet.com/#/SendSMSMobile?id=" + this.pObj.Id,
						data: {
							thing2: {
								value: this.pObj.CompayName,
								color: "#173177",
							},
							thing3: {
								value: this.pObj.Customer,
								color: "#173177",
							},
							time4: {
								value: this.pObj.CreateTime.substring(0, 10),
								color: "#173177",
							},
							time5: {
								value: this.getNowDate(),
								color: "#173177",
							},
							thing6: {
								value: this.userInfo.UserName,
								color: "#173177",
							},
						},
					}),
				}).then((res) => {
					console.log(res);
				});

				// uni.request({
				// 	url: 'https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=' +
				// 		access_token,
				// 	method: 'POST',
				// 	data: {
				// 		touser: id,
				// 		template_id: 'N83E6yjj2O2PavcmDgR3POlCLZfo3jDd8CAWBzZyx1s',
				// 		url: 'https://hzq.yoojet.com/#/SendSMSMobile?id=' + this.pObj.Id,
				// 		data: {
				// 			'thing2': {
				// 				value: this.Company,
				// 				"color": "#173177"
				// 			},
				// 			'thing3': {
				// 				value: this.CustomerName,
				// 				"color": "#173177"
				// 			},
				// 			'time4': {
				// 				value: this.pObj.CreateTime.substring(0, 10),
				// 				"color": "#173177"
				// 			},
				// 			'time5': {
				// 				value: this.getNowDate(),
				// 				"color": "#173177"
				// 			},
				// 			'thing6': {
				// 				value: this.userInfo.UserName,
				// 				"color": "#173177"
				// 			}
				// 		}
				// 	}
				// }).then(res => {
				// 	console.log(res);
				// })
			},
			// 计算坐标距离
			calculateDiscount(lng1, lat1, lng2, lat2) {
				const radLat1 = (lat1 * Math.PI) / 180.0;
				const radLat2 = (lat2 * Math.PI) / 180.0;
				const a = radLat1 - radLat2;
				const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				let s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2)
						)
					);
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000;
				if (isNaN(s)) {
					return 0;
				}
				s = Math.floor((s / 1000) * 100) / 100;
				// 小于1000米直接返回
				return s.toFixed(2);
			},
			// 日期
			getNowDate() {
				var date = new Date();
				var sign2 = ":";
				var year = date.getFullYear(); // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			},
		},
	};
</script>

<link href="../../static/jquery-letterfx.css" rel="stylesheet" type="text/css" />
<style scoped lang="scss">
	.positionBox {
		display: flex;
		align-items: center;
		margin-top: 20px;
		height: 40px;

		.positionLine {
			flex: 1;
			height: 100%;
			overflow-y: scroll;
			box-sizing: border-box;
			border-bottom: 1px solid #ccc;
		}

		.positionBtn {
			height: 100%;
			background: linear-gradient(to bottom, #5cccfe, #2799f9);
			border: none;

			.positionIcon {
				line-height: 40px;
				color: #fff;
			}
		}
	}

	.avatar {
		width: 70px;
		height: 70px;
	}

	.topBox {
		height: 72px;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		position: relative;
		align-items: center;
	}

	.formLable {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		flex: 1;

		.lableItem {
			height: 35px;
			line-height: 35px;
			margin-right: 10px;
			color: #000;
		}
	}

	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		padding-bottom: 30px;
		z-index: 9;
	}

	.remarkBox {
		width: 80vw;
		border-radius: 10px;
		background-color: #fff;
		box-sizing: border-box;

		.title {
			text-align: center;
			line-height: 4;
			color: #666;
		}

		.content {
			padding: 10px;
			padding-top: 0;

			.textarea {
				border: 1px solid #b7b7b7;
				width: 100%;
				border-radius: 3px;
				padding: 5px;
				box-sizing: border-box;
			}

			.memoLength {
				text-align: right;
				color: #666;
			}
		}

		.footer {
			display: flex;
			border-top: 1px solid #f0f0f0;

			text {
				line-height: 3;
				text-align: center;
				flex: 1;
			}

			.confirmBtn {
				color: #007aff;
				border-left: 1px solid #f0f0f0;
			}
		}
	}

	.container {
		box-sizing: border-box;
		padding: 0 10px;
		box-shadow: 0 2px 10px #ccc;
		border-radius: 20px;
		width: 94%;
		margin: 0 auto;
		background: #fff;
	}

	.logoTitlelit {
		margin: 0;
		margin-bottom: 6vh;
		text-align: center;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
	}

	.flexCell {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 180px;
		overflow: hidden;
		width: 100%;
	}

	.imgSignature {
		transform: rotate(-90deg);
		width: 160px;
	}

	b {
		font-weight: normal;
		color: #777;
	}

	.layer {
		padding: 20px 10px;
		min-height: calc(100vh - 44px);
		padding-bottom: 90px;
		box-sizing: border-box;
	}

	h3 {
		margin: 0px 0;
	}

	.info {
		padding: 5px;
		line-height: 1.4;
		/* background: #fff; */
		margin: 10px 0;
		border-bottom: 1px solid #ccc;
		font-size: 12px;
	}

	.info .cell {
		color: #000;
		display: flex;

		text {
			min-width: 61px;
		}

		b {
			margin-left: 10px;
		}
	}

	.info .number {
		margin-left: 5px;
		border-radius: none;
		width: 120px;
		border: none;
		border-bottom: 1px solid #666;
		height: 22px;
		text-align: left;
	}

	.logo {
		width: 100%;
		height: 10vh;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.logo img {
		width: 50px;
	}

	.logo .logoTitle {
		color: #fff;
		margin: 0;
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 32px;
	}

	.van-button-css {
		border-radius: 10px;
		height: 36px;
		line-height: 36px;
	}

	.submitButton {
		margin: 0 auto;
		margin-top: 10px;
		width: 90vw;
		display: block;
		border-radius: 5px;
	}

	.loadCus {
		position: fixed;
		width: 100vw;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 99999;
		margin: 0;
		background: #fff;
	}

	.tagline {
		width: 100vw;
		height: 50vh;
		font-weight: 600;
		line-height: 80vh;
		text-align: center;
		font-size: 32px;
		background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-background-size: 200% 100%;
		-webkit-animation: gradient-animation infinite 3s linear;
	}

	@-webkit-keyframes gradient-animation {
		0% {
			background-position: 0% 0;
		}

		100% {
			background-position: -100% 0;
		}
	}

	.tagline1 {
		width: 100vw;
		height: 50vh;
		font-weight: 600;
		text-align: center;
		line-height: 40px;
		font-size: 18px;
		background-image: -webkit-linear-gradient(left, #67B7F9, #67B7F9 25%, #ffffff 50%, #ffffff);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-background-size: 300% 100%;
		-webkit-animation: fadeIn-animation 3s linear infinite;
	}

	@-webkit-keyframes fadeIn-animation {
		0% {
			background-position: 100% 0;
		}

		80% {
			background-position: 0% 0;
		}
	}
</style>